<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-position="top" @keyup.enter="submitHandle()">
			<el-form-item label="当前状态" prop="status">
				<ma-dict-select v-model="dataForm.status" :dict-type="statusType" clearable placeholder="当前状态"></ma-dict-select>
			</el-form-item>
			<el-form-item v-if="dataForm.matlConfirm !== null" label="企业材料确认" prop="matlConfirm">
				<ma-dict-select
					v-model="dataForm.matlConfirm"
					dict-type="enterprise_info_status"
					:disabled="dataForm.matlConfirm === '尚未完成提交相关材料'"
					clearable
					placeholder="企业材料确认"
				>
				</ma-dict-select>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="dataForm.remark" placeholder="备注信息"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="StepStatesHandle">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useProcess_statesApi, useProcess_statesSubmitApi } from '@/api/project/states'
const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()
const statusType = ref('procedure_status')

const dataForm = reactive({
	id: '',
	stepId: '',
	status: '',
	matlConfirm: '',
	remark: ''
})
const open = async (id: number) => {
	await init(id)
}
const init = async (id?: number) => {
	visible.value = true
	dataForm.id = ''

	if (dataFormRef.value) {
		dataFormRef.value.resetFields()
	}
	if (id) {
		await getProcessStates(id)
	}
}

const getProcessStates = async (id: number) => {
	useProcess_statesApi(id).then(res => {
		Object.assign(dataForm, res.data)

		if (res.data.stepId === 2) {
			statusType.value = 'contract_status'
		} else if (res.data.stepId === 3 || dataForm.stepId === 4) {
			statusType.value = 'registration_status'
		} else if (dataForm.stepId === 5) {
			statusType.value = 'land_approval_and_purchase'
		} else if (dataForm.stepId === 6) {
			statusType.value = 'lease_agreement_status'
		} else {
			statusType.value = 'procedure_status'
		}
		console.log(res.data.stepId)
	})
}

const dataRules = ref({})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useProcess_statesSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					statusType.value = 'procedure_status'
					// dataId.value = 0
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	open
})
</script>
